<template>
	<view class="content">
		<view v-if="UserStore.userInfo">
			<view class="backgroup">
				<image src="../../static/imges/my_bg1.png" class='imagesr'></image>
			</view>
			
			<!-- 内容 -->
			<view class="about_conter">	
			
				<!-- 头像，名字-->
				<view class="img_name">
					<view class="name_left">
					  <view class="logo_l">
							<image src="../../static/imges/toux.png" class='imagesr'></image>
					  </view>
					  <view class="name_r">
					    <view class="r_h3">
					      <text class="on">{{UserStore.userInfo.user_name}}</text>
								<text class="on" v-if="UserStore.userInfo.job_info.agency">({{UserStore.userInfo.job_info.agency}})</text>
								<text class="on" v-if="UserStore.userInfo.job_info.position">({{UserStore.userInfo.job_info.position}})</text>
					    </view>
					    <view class="r_span">
					      <text class="in">{{UserStore.userInfo.mobile_phone}}</text>
					    </view>
					  </view>
					</view>
				</view>
				<!-- 头像，名字end -->
			
				<!-- 收益框 -->
				<view class="incomes ab_shadows">
					<view class="incomes_top">
						<view class="top_left">Hi,一天好~</view>
						<view class="top_right">欢迎使用泽佑生鲜配送端</view>
					</view>
			
					<view class="incomes_ul">
						<view class="incomes_li">
							<view class="in">
								<u-count-to :startVal="0" :endVal="UserStore.userInfo.order_info.today_count" :duration="'500'" :color="'#35B8F5'" :fontSize="20" bold></u-count-to>
							</view>
							<view class="on">今日总单量</view>
						</view>
						<view class="incomes_li">
							<view class="in">
								<u-count-to :startVal="0" :endVal="UserStore.userInfo.order_info.tobe_received" :duration="'500'" :color="'#35B8F5'" :fontSize="20" bold></u-count-to>
							</view>
							<view class="on">待配送</view>
						</view>
						<view class="incomes_li">
							<view class="in">
								<u-count-to :startVal="0" :endVal="UserStore.userInfo.order_info.tobe_delivery" :duration="'500'" :color="'#35B8F5'" :fontSize="20" bold></u-count-to>
							</view>
							<view class="on">已完成</view>
						</view>
					</view>
					
					
					<!-- 跳动 -->
					<!-- <view class="bjqp_content">
						<view class="bjqp_bj1"></view>
						<view class="bjqp_bj5"></view>
						<view class="bjqp_bj2"></view>
						<view class="bjqp_bj3"></view>
						<view class="bjqp_bj4">
							<text class="iconfont icon-dingdan-quanbudingdan"></text>
						</view>
					</view> -->
					<!-- 跳动end -->
				</view>
				<!-- 收益框 end-->
				
				
				<!-- 列表 -->
				<view class="lists">
					<view class="lists_li ab_shadow" @click="outerHref('/pagesA/pages/customer/customer')">
						<view class="left_icons n1 ab_shadowsr"><text class="iconfont icon-dingdan-quanbudingdan"></text></view>
						<view class="left_span"><text>我的订单</text><text style="color: red; font-weight: 700;">({{UserStore.userInfo.order_info.is_confirmed}})</text></view>
					</view>
					<view class="lists_li ab_shadow" @click="outerHref('/pagesA/pages/sale/sale')">
						<view class="left_icons n2 ab_shadowsr"><text class="iconfont icon-qinghuosaomiao"></text></view>
						<view class="left_span"><text>清货订单</text><text style="color: red;font-weight: 700;">({{UserStore.userInfo.order_info.no_confirmed}})</text></view>
					</view>
					<view class="lists_li ab_shadow" @click="cldtClick">
						<view class="left_icons n3 ab_shadowsr"><text class="iconfont icon-banjiapeisong"></text></view>
						<view class="left_span"><text>订单地图</text></view>
					</view>
					<view class="lists_li ab_shadow" @click="outerHref('/pagesA/pages/search/search')">
						<view class="left_icons n6 ab_shadowsr"><text class="iconfont icon-a-sousuo3"></text></view>
						<view class="left_span"><text>搜索订单</text></view>
					</view>
					<!-- <view class="lists_li ab_shadow" @click="outerHref('/pages/index/index1')">
						<view class="left_icons n4 ab_shadowsr"><text class="iconfont icon-banjiapeisong"></text></view>
						<view class="left_span"><text>让我想想</text></view>
					</view> -->
					<!-- <view class="lists_li ab_shadow" @click="outerHref('/pagesA/pages/maps/mapsOrder')">
						<view class="left_icons n4 ab_shadowsr"><text class="iconfont icon-banjiapeisong"></text></view>
						<view class="left_span"><text>地图显示</text></view>
					</view> -->
					<view class="lists_li ab_shadow" @click="outerHref('/pagesA/pages/setup/setup')">
						<view class="left_icons n4 ab_shadowsr"><text class="iconfont icon-shezhi-shezhi-tianchong"></text></view>
						<view class="left_span"><text>个人设置</text></view>
					</view>
					<!-- <view class="lists_li" @click="haibaoFun">
						<view class="li_left">
							<view class="left_icons n2"><text class="iconfont icon-kehu"></text></view>
							<view class="left_span"><text>提现记录</text></view>
						</view>
						<view class="li_right"><text class="iconfont icon-xiangyou2"></text></view>
					</view> -->
				</view>
				<!-- 列表 end-->
			</view>
		</view>
		
		<!--加载框 start-->
		<loading :visible="(loadingTrue && UserStore.userInfo)" :show="false"></loading>
		<!--加载框 end-->
		
		<!-- 定位权限 -->
		<locationLimits></locationLimits>
		<!-- 定位权限 -->
	</view>
</template>

<script setup>
	import { ref } from "vue"
	import {onLoad,onShow} from "@dcloudio/uni-app"
	//跳转判断
	import {outerHref} from '@/composables/outerHref.js'
	
	//引入用户相关的小仓库
	import useUserStore from '@/store/user.js'
	const UserStore = useUserStore()
	
	//默认
	const loadingTrue=ref(false);
	
	//用户信息数据
	function userFun(){
		if(!uni.getStorageSync('userInfo')){
			loadingTrue.value=false;
			UserStore.getUserInfoFun();
		}else{
			loadingTrue.value=false;
			UserStore.userInfo=uni.getStorageSync('userInfo');
			UserStore.getUserInfoFun();
			console.log(UserStore.userInfo,'用户信息')
		}
	}
	
	
	
	//判断是否登录
	function loginFun(){
		if(!uni.getStorageSync('token')){
			outerHref('/pagesA/pages/login/login',2);
		}else{ //登录成功
			//获取用户信息
			userFun();
		}
	}
	
	//查看地图
	function cldtClick(){
		//#ifdef H5
		outerHref('/pagesA/pages/maps/mapsOrderAll?lat=29.58787&long=106.544317')
		// #endif 
		
		//#ifdef MP-WEIXIN || APP-PLUS
		UserStore.addressGetLocation((res,bloo)=>{
			if(bloo){ //定位成功
				console.log(res,'定位数据')
				// let address=res.address.province+res.address.district+res.address.street+res.address.poiName;
				// postOrderStoreLocationFun(item.id,parseFloat(res.latitude).toFixed(8),parseFloat(res.longitude).toFixed(8),address);
				
				outerHref('/pagesA/pages/maps/mapsOrderAll?lat='+parseFloat(res.latitude).toFixed(6)+'&long='+parseFloat(res.longitude).toFixed(6))
			}else{ //定位失败
				uni.showToast({title: '定位失败!',icon:'none'});
				useCustomer.loadingTrue=false;
			}
		})
		// outerHref('/pagesA/pages/maps/mapsOrder')
		// #endif 
		
	}
	
	onLoad((res)=>{

	})
	
	onShow(()=>{
		loginFun();
	})
	
	
</script>

<style lang="scss" scoped>
.content{
	position: relative;
}
.backgroup{
	height: 380rpx;
	z-index: -1;
	.imagesr{
		width: 100%;
		height: 380rpx;
	}
}
.about_conter{
	position: relative;
	z-index: 1;
	margin-top: -290rpx;
	padding: 30rpx;
	padding-top: 0;
	.img_name{
		display: flex;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		.name_left{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			text-align: center;
			.logo_l{
				background-size: cover;
				background-repeat: no-repeat;
				background-position: top;
				border: 8rpx solid rgba(255,255,255,0.05);
				box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
				border-radius: 50%;
				overflow: hidden;
			  display: flex;
				align-items: center;
				justify-content: center;
				text-align: center;
				.imagesr{
					width: 110rpx;
					height: 110rpx;
				}
			}
			.name_r{
				margin-top: 10rpx;
				.r_h3{
					color: #fff;
					font-size: 32rpx;
					font-weight: 700;
				}
				.r_span{
					margin-top: 10rpx;
					color: #fff;
					font-size: 30rpx;
					font-weight: 700;
				}
			}
		}
	}
}	
.ab_shadow{
	border-radius: 15rpx;
	box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.1);
	background: #fff;
}
.ab_shadows{
	border-radius: 15rpx;
	box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(14,142,239, 0.5);
	background: #fff;
}
.ab_shadowsr{
	border-radius: 15rpx;
	box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(14,142,239, 0.2);
	background: #fff;
}
.incomes{
	padding: 30rpx;
	margin-top: 30rpx;
	.incomes_top{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-bottom:30rpx;
		.top_left{
			font-size: 28rpx;
			color: #35B8F5;
		}
		.top_right{
			font-size: 28rpx;
			color: #35B8F5;
		}
	}

	.incomes_ul{
		display: flex;
		align-items: center;
		.incomes_li{
			flex: 1;
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			.on{
				font-size: 26rpx;
				color: #000;
			}
			.in{
				font-size: 32rpx;
				color: #35B8F5;
				margin-bottom: 14rpx;
			}
		}
		.incomes_li::after {
			content: '';
			display: block;
			width: 2rpx;
			height: 60rpx;
			background-color: #eee;
			position: absolute;
			top: 20rpx;
			right: 0;

		}
		.incomes_li:last-child::after{
			width: 0;
		}
	}
}
.lists{
		margin-top: 30rpx;
		border-radius: 12rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		.lists_li{
			position: relative;
			width:46%;
			box-sizing: border-box;
			background-color: #F8FAFB;
			color: #080808;
			font-size: 30rpx;
			padding:40rpx 0;
			margin-bottom: 50rpx;
			// 
			overflow: hidden;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			transition: 0.3s all;
			&:before {
				position: absolute;
				right: 30rpx;
				bottom: 0;
				left: 30rpx;
				height: 2rpx;
				background: #f8f8f8;
				content: "";
			}
			&:last-child:before {
				height: 0;
			}
			.left_icons{
				flex: none;
				width: 80rpx;
				height: 80rpx;
				margin-right: 10rpx;
				border-radius: 20rpx;
				position: relative;
				z-index: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 20rpx;
				.iconfont{
					font-size: 42rpx;
					color: #fff;
				}
			}
			.left_icons.n1{
				background-image: repeating-linear-gradient(45deg, #118DED, #33B8FB);
			}
			.left_icons.n2{
				background-image: repeating-linear-gradient(45deg, #A26FFC, #9D12FF);
			}
			.left_icons.n3{
				background-image: repeating-linear-gradient(45deg, #0FD893, #29ECBF);
			}
			.left_icons.n4{
				background-image: repeating-linear-gradient(45deg, #FEA921, #FBC000);
			}
			.left_icons.n5{
				background-image: repeating-linear-gradient(45deg, #FF3181, #A26FFC);
			}
			.left_icons.n6{
				background-image: repeating-linear-gradient(45deg, #FEA921, #FF8331);
			}
			.left_span{
				font-size:28rpx;
				color: #000;
			}
		}
		.lists_li:active{
			background: #e8e8e8;
		}
	}
	

.bjqp_content{
		position: relative;
		width: 360rpx;
		height: 360rpx;
		.bjqp_bj1{
			width: 360rpx;
			height: 360rpx;
			opacity: 0.1;
			background: #5297ff;
			border-radius: 50%;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			z-index: 2;
		}
		.bjqp_bj5{
			width: 360rpx;
			height: 360rpx;
			opacity: 0.1;
			background: #5297ff;
			border-radius: 50%;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			animation: waveRaidus1 2s ease-out 0s infinite;
			z-index: 1;
		}
		.bjqp_bj2{
			width: 282rpx;
			height: 282rpx;
			opacity: 0.1;
			background: #5297ff;
			border-radius: 50%;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			z-index: 3;
		}
		.bjqp_bj3{
			width: 208rpx;
			height: 208rpx;
			background: #5297ff;
			border-radius: 50%;
			box-shadow: 0px 0px 15rpx 0px #6ca7fb; 
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			z-index: 4;
		}
		.bjqp_bj4{
			width: 208rpx;
			height: 208rpx;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 5;
		}
		
	}
@-webkit-keyframes waveRaidus1 {
		0% {
				width: 100%;height: 100%;
				opacity: 0;
		}
		65% {
				width: 100%;height: 100%;
				opacity: 0;
		}
		66% {
				width: 100%;height: 100%;
				opacity: 0.2;
		}
		100% {
				width: 130%;height: 130%;
				opacity: 0;
		}
}
@keyframes waveRaidus1 {
		0% {
				width: 100%;height: 100%;
				opacity: 0;
		}
		65% {
				width: 100%;height: 100%;
				opacity: 0;
		}
		66% {
				width: 100%;height: 100%;
				opacity: 0.2;
		}
		100% {
				width: 130%;height: 130%;
				opacity: 0;
		}
}
</style>
